#snackbar {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    font-weight:bold;
    border-radius: 2px;
    position: fixed;
    z-index: 100;
    bottom: 0px;
    font-size: 17px;
    width:100%;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 1.0s, fadeout 1.0s 9s;
    animation: fadein 1s, fadeout 1s 9s;
}

@-webkit-keyframes fadein {
    from {bottom: -100px; opacity: 0;}
    to {bottom: 0px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: -100px; opacity: 0;}
    to {bottom: 0px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 0px; opacity: 1;}
    to {bottom: -200px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 0px; opacity: 1;}
    to {bottom: -200px; opacity: 0;}
}

.snackbar-text {
    padding: 100px;
}

.snackbar-close {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    cursor: pointer;
}
.snackbar-close:hover {
    opacity: 1;
}
.snackbar-close:before, .snackbar-close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #fff;
}
.snackbar-close:before {
    transform: rotate(45deg);
}
.snackbar-close:after {
    transform: rotate(-45deg);
}